<template>
	<view>
		<view class="top u-f-ac">
			<view class="top-l">从 ------ 到</view>
			<view class="top-r ">
				<view class="u-f-jsb" @tap="show = true && !selOperator.actualBalance && selOperator.actualBalance!==0">
					<view v-if="selOperator.actualBalance || selOperator.actualBalance===0" class="sel">{{ '可用 ' + selOperator.actualBalance }} 元</view>
					<template v-else>
						<view class="sel">选择运营商</view>
						<u-icon v-if="!selOperator.actualBalance" name="arrow-right" color="#999999" size="28"></u-icon>
					</template>
				</view>
				<view class="card-num">NO：{{ card.cardNo }}</view>
			</view>
		</view>
		<view class="main">
			<view class="main-t">余额</view>
			<view class="main-m u-f-jsb">
				<view class="u-f-ac">
					<view class="i">¥</view>
					<input type="digit" value="" v-model="cardMoney" />
				</view>
				<view @tap="allocateAll">全部分配</view>
			</view>
		</view>
		<view class="btn" @tap="handleAllocate">确定</view>

		<u-popup v-model="show" mode="bottom">
			<view class="pop">
				<view class="pop-t u-f-jsb">
					<view class="title">运营商选择</view>
					<u-icon class="close" name="close" size="30" @tap="show = false"></u-icon>
				</view>
				<view class="list">
					<view
						class="item"
						v-for="item in operators"
						:key="item.operaId"
						@tap="
							show = false;
							selOperator = item;
						"
					>
						<view>{{ item.operName }}</view>
						<view>可用：¥ {{ item.actualBalance }}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			card: {},
			cardMoney: '',
			operators: [],
			selOperator: {} // 选择的运营商
		};
	},
	onLoad(options) {
		this.card = JSON.parse(decodeURIComponent(options.card) || '{}');
		this.getUserOperatorList();
	},
	methods: {
		handleAllocate() {
			if (!this.selOperator.operaId) {
				return this.$showToast('请填写选择运营商账户！');
			}
			if (!this.cardMoney) {
				return this.$showToast('请填写分配金额！');
			}
			if (!this.$u.test.amount(this.cardMoney)) {
				return this.$showToast('请填写正确的金额！');
			}
			if (this.selOperator.actualBalance <= 0 ||this.cardMoney > this.selOperator.actualBalance) {
				return this.$showToast('账户余额不足');
			}
			
			this.$http({
				url: this.$api.recordUrl + 'distributecardmoney',
				data: {
					action: 1,
					cardId: this.card.cardId,
					cardMoney: this.cardMoney,
					operatorId: this.selOperator.operaId
				}
			}).then(res => {
				this.card.startVal = Number(this.card.cardMoney);
				this.card.cardMoney = this.$operation(this.card.cardMoney, '+', this.cardMoney);
				this.card.operaId = this.selOperator.operaId;
				this.card.operName = this.selOperator.operName;
				uni.showModal({
					content: '分配成功！',
					showCancel: false,
					success: () => {
						uni.navigateBack({
							success:()=>{
								uni.$emit('userAcc_cardChe', this.card);
							}
						});
						
					}
				});
			});
		},
		getUserOperatorList() {
			this.$http({
				url: this.$api.userUrl + 'getfilluseroperatorbyuser'
			}).then(res => {
				this.operators = res;
				if (this.card.operaId) {
					res.some(item => {
						if (item.operaId == this.card.operaId) {
							this.selOperator = item;
							return true;
						}
					});
				}
			});
		},
		allocateAll() {
			if (!this.selOperator) return;
			this.cardMoney = this.selOperator.actualBalance;
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f5f5f5;
}
.top {
	height: 260rpx;
	background-color: #ffffff;
	margin-top: 20rpx;

	.top-l {
		width: 100rpx;
		color: #999999;
		writing-mode: tb-rl;
	}
	.top-r {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		margin: 0 60rpx 0 40rpx;

		.sel {
			width: 500rpx;
			border-bottom: 1rpx solid #cccccc;
			padding-bottom: 20rpx;
		}
	}
	.card-num {
		font-size: 30rpx;
	}
}

.main {
	background: #ffffff;
	margin-top: 20rpx;
	padding: 30rpx;

	.main-t {
		font-size: 32rpx;
		font-weight: 600;
	}
	.main-m {
		width: 100%;
		border-bottom: 1rpx solid #cccccc;
		padding: 30rpx 0 20rpx 0;
		margin-bottom: 20rpx;

		.i {
			font-size: 36rpx;
			font-weight: 800;
		}
		input {
			margin-left: 20rpx;
			font-size: 40rpx;
		}
		& > view:last-child {
			text-align: center;
			width: 140rpx;
			color: #0dc887;
			font-weight: 600;
		}
	}
	.most {
		color: #999999;
		font-size: 28rpx;
	}
}

.pop {
	width: 100vw;
	min-height: 410rpx;
	background-color: #ffffff;

	.pop-t {
		padding: 30rpx;
		font-size: 32rpx;
		border-bottom: 2rpx solid #ebebeb;
		font-size: 32rpx;

		view {
			font-size: 30rpx;
			font-weight: 600;
		}

		.close::after {
			content: '';
			position: absolute;
			transform: translateX(-25%);
			padding: 40rpx;
		}
	}

	.list {
		max-height: 400rpx;
		overflow-y: scroll;
		.item {
			padding: 10rpx 30rpx;
			border-bottom: 2rpx solid #e8e8e8;

			& > view:first-child {
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}
			& > view:last-child {
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}
		}
	}
}

.btn {
	position: absolute;
	top: 60vh;
	width: 690rpx;
	height: 88rpx;
	margin: 72rpx 30rpx 0 30rpx;
	color: #ffffff;
	border-radius: 8rpx;
	background-color: #0dc887;
	text-align: center;
	line-height: 88rpx;
}
</style>
